﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增子账号</title>
    <meta name="keywords" content="翻倍花，O2O，第三方推广，服务平台">
    <meta name="description" content="翻贝网致力于打造国内最具公信力的第三方推广和服务平台">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut  icon" type="image/x-icon" href="{{ env('IMAGE_DOMAIN') }}images/icon.png" media="screen"  />
    <style>
        body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option{margin: 0; padding: 0;}
        ul,ol{list-style: none;}
        img{border: 0;}
        input,select,textarea{outline:0;border:none;}
        html,body{font-family: "微软雅黑"}
        textarea{resize:none;}
        table{border-collapse: collapse; border-spacing: 0;}
        a{text-decoration: none;color: #000;}
        h2{font-weight: normal;}
        /*=========================重置样式==========================*/
        .promit_mark{width: 100%;position: fixed;top: 0;left: 0;z-index: 1000;display: none;height: 100%;}
        .content{width: 1000px;margin: 0 auto;}
        .header{padding: 20px 0;overflow: hidden;border-bottom: 1px solid #eee;}
        .header p{float: left;font-size: 18px;color: #333;}
        .content .title{margin-top: 30px;font-size: 18px;margin-bottom: 20px;color: #333;}
        .account_message p{overflow: hidden;margin: 20px 0;}
        .account_message .message span{float: left;width: 60px;text-align: right;margin-right: 10px;line-height: 30px;color: #808080}
        .account_message .message input[type="text"]{float: left;width: 200px;height: 25px;padding: 0 5px;border: 1px solid #808080;}
        .shop_name{overflow: hidden;margin: 20px 0;font-size: 14px;color: #808080;}
        .shop_name p{float: left;margin-right: 5px;overflow: hidden;}
        .shop_name p input[type="checkbox"]{float: left;margin-right: 5px;}
        .shop_name p span{float: left;margin-right: 20px;font-size: 14px;}
        .shopcheck{position: relative;float: left;margin-right: 10px;}
        .shopcheck input{position: absolute;visibility: hidden;}
        .shopcheck input+label{display: inline-block;width: 16px;height: 16px;border: 1px solid #A5A5A5;margin: 0;}
        .shopcheck input:checked+label:after{content: "";position: absolute;left: 3px;bottom: 11px;width: 9px;height: 4px;border: 2px solid green;border-top-color: transparent;border-right-color: transparent;-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);transform: rotate(-45deg);}
        .account_message .message .get_yzm{width: 120px;background-color: #fff;color: #9955c6;height: 30px;border-radius: 3px;border: 1px solid #9955c6;margin-left: 20px;font-size: 14px;cursor: pointer;}
        .power{width: 91%;float: left;}
        .power li{margin-bottom: 20px;overflow: hidden;width: 100%;}
        .nochoose{position: relative;float: left;margin-right: 10px;}
        .nochoose input{position: absolute;visibility: hidden;}
        .nochoose input+label{display: inline-block;width: 16px;height: 16px;border: 1px solid #A5A5A5;margin: 0;background-color: #999;}
        .nochoose input:checked+label:after{content: "";position: absolute;left: 3px;bottom: 11px;width: 9px;height: 4px;border: 2px solid #fff;border-top-color: transparent;border-right-color: transparent;-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);transform: rotate(-45deg);}
        .power li input{float: left;margin-right: 10px;}
        .power li span{float: left;margin-right: 20px;font-size: 14px;}
        .content .button{overflow: hidden;border-top: 1px solid #808080;padding: 20px 0;}
        .content .button input[type="button"]{width: 100px;height: 30px;background-color: #9955c6;color: #fff;border-radius: 5px;margin-left: 10px;cursor: pointer;}
        /*.content .button input[type="submit"]{width: 130px;height: 35px;background-color: #fff;border: 1px solid #808080;border-radius: 5px;margin-left: 10px;}*/
        .power_check{font-size: 14px;margin-top: 20px;overflow: hidden;color: #808080;}
        .power_check .power_title{float: left;width: 8%;margin-right: 1%;text-align: right;color: #333;}
        .power_check select{font-size: 14px;border: 1px solid #666;}
        .shop_power{width: 100%;float: left;}
        .shop_power .shop_power_title{width: 100%;background-color: #eee;overflow: hidden;height: 40px;line-height: 40px;padding: 0 20px;margin-bottom: 20px;}
        .shop_power .shop_power_title .shop_power_name{font-size: 16px;float: left;}
        .shop_power .shop_power_title .shop_power_delect{font-size: 16px;float: right;color: red;cursor: pointer;}
        .every_shop{overflow: hidden;}
        .prompt{width: 300px;position: absolute;top: 200px;left: 50%;margin-left: -150px;box-shadow: 0px 0px 5px 5px rgba(128,128,128,0.5);background-color: #fff;display: none;z-index: 1001;}
        .prompt .title{overflow: hidden;width: 100%;height: 50px;line-height: 50px;}
        .prompt .title span{float: left;font-size: 16px;color: #808080;margin-left: 15px;}
        .prompt .title img{float: right;width: 20px;margin-top: 15px;margin-right: 15px;cursor: pointer;}
        .prompt .prompt_content{padding: 15px 30px;font-size: 14px;}
        .prompt .button span{padding: 15px 0;font-size: 16px;cursor: pointer;width: 100%;text-align: center;}
    </style>
</head>
<body>
    <p class="promit_mark"></p>
    <div class="content">
        <div class="header">
            <p>
                <span>新增子账号</span>
            </p>
        </div>
        <form id="new_account" action="" method="">
            <div class="account_message">
                <p class="message">
                    <span>姓名</span>
                    <input type="text" name="account_name" value="">
                </p>
                <p class="message">
                    <span>手机号</span>
                    <input type="text" name="account_mobile" value="">
                </p>
                <p class="message yzm_code">
                    <span>验证码</span>
                    <input type="text" name="code" value="">
                    <input class="get_yzm" type="button" name="" value="获取验证码">
                </p>
            </div>
            <div class="title">功能权限</div>
            <div class="shop_name">
                <span style="width: 8%;margin-right: 1%;float: left;text-align: right;color: #333;">选门店：</span>
                <p class="all_shop">
                    <span class="shopcheck"><input type="checkbox" name="" value="0" id="shopname0"><label for="shopname0"></label></span>
                    <span>所有门店</span>
                </p>
                <div class="every_shop">
                @foreach($lists as $list)
                    <p>
                        <span class="shopcheck"><input type="checkbox" name="shopid" value="{{$list['shopid']}}" id="{{$list['shopid']}}"><label for="{{$list['shopid']}}"></label></span>
                        <span class="shopname">{{$list['shopname']}}</span>
                    </p>
                @endforeach
                </div>
            </div>
            <p class="power_check">
                <span class="power_title">权限类型：</span>
                <select name="" id="power_way" onchange="choose_power_way()">
                    <option value="0">在不同的门店下权限相同</option>
                @if(count($lists)>1))
                    <option value="1">在不同门店的权限独立配置</option>
                @endif
                </select>
            </p>
            <div class="power_check">
                <span class="power_title">选功能：</span>
                <div class="power">
                    
                </div>
            </div>
            <p class="button">
                <input type="button" name="sure" value="完成">
            </p>
        </form>
    </div>
    <div class="prompt">
        <p class="title">
            <span>确认提示</span>
            <img src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
        </p>
        <p class="prompt_content"></p>
        <p class="button">
            <span class="sure" style="float: right;">确定</span>
        </p>
    </div>
    <script src="{{env('JS_DOMAIN')}}js/jquery-1.11.1.min.js?v={{env('JS_VERSION')}}"></script>
    <script>
        //权限选择独立或统一
        var ul = $('<ul>'+
                '<li>'+
                    '<p class="shopcheck"><input type="checkbox" name="" value="Account" id="check1"><label for="check1"></label></p>'+
                    '<span>买单收银</span>'+
                    '<span style="color: red;">仅在app支持使用本功能</span>'+
                '</li>'+
                '<li>'+
                    '<p class="shopcheck"><input type="checkbox" name="" value="DoubleCalendar" id="check2"><label for="check2"></label></p>'+
                    '<span>设置翻倍日及ktv/酒店夜场专场</span>'+
                    '<span style="color: red;">暂时仅在app支持使用本功能</span>'+
                '</li>'+
                '<li>'+
                    '<p class="shopcheck"><input type="checkbox" name="" value="OrderManager" id="check3"><label for="check3"></label></p>'+
                    '<span>订单管理</span>'+
                '</li>'+
                '<li>'+
                    '<p class="shopcheck"><input type="checkbox" name="" value="CommentManager" id="check9"><label for="check9"></label></p>'+
                    '<span>评价管理</span>'+
                    '<span style="color: red;">暂时仅在app支持使用本功能</span>'+
                '</li>'+
                '<li>'+
                    '<p class="shopcheck"><input type="checkbox" name="" value="CollectMoney" id="check4"><label for="check4"></label></p>'+
                    '<span>财务结款</span>'+
                '</li>'+
                '<li>'+
                    '<p class="nochoose"><input type="checkbox" name="DoubleCalendar" value="" checked onclick="return false" id="check5"><label for="check5"></label></p>'+
                    '<span>查看翻倍日</span>'+
                    '<span style="color: red;">暂时仅在app支持使用本功能,所有子账号均有此功能</span>'+
                '</li>'+
                '<li>'+
                    '<p class="nochoose"><input type="checkbox" name="" value="" checked onclick="return false" id="check6"><label for="check6"></label></p>'+
                    '<span>地推管理</span>'+
                    '<span style="color: red;">所有子账号均有此功能</span>'+
                '</li>'+
                '<li>'+
                    '<p class="nochoose"><input type="checkbox" name="" value="" checked onclick="return false" id="check7"><label for="check7"></label></p>'+
                    '<span>专属二维码</span>'+
                    '<span style="color: red;">所有子账号均有此功能</span>'+
                '</li>'+
                '<li>'+
                    '<p class="nochoose"><input type="checkbox" name="" value="Admin" onclick="return false" id="check8"><label for="check8"></label></p>'+
                    '<span>授权管理</span>'+
                    '<span style="color: red;">仅提供给管理员使用</span>'+
                '</li>'+
            '</ul>');
        $('.power').append(ul);
        var shopcount = $(".every_shop input[type='checkbox']").length;
        $(".all_shop input[type='checkbox']").click(function(){
            if($(this).is(":checked") == true){
                for (var i = 0; i < shopcount; i++) {
                    $(".every_shop input[type='checkbox']").eq(i).prop("checked",true);
                };
            }else{
                for (var i = 0; i < shopcount; i++) {
                    $(".every_shop input[type='checkbox']").eq(i).prop("checked",false);
                };
            }
            choose_power_way()
        });
        $(".every_shop input[type='checkbox']").click(function(){
            var shopname = $(this).parent().siblings('.shopname').html();
            var shopid = $(this).val();
            if($('#power_way').val() == '1'){
                if($(this).is(":checked") == true){
                    var shop_power = $('<div class="shop_power" shopid="'+shopid+'">'+
                                '<p class="shop_power_title">'+
                                    '<span class="shop_power_name">'+shopname+'</span>'+
                                    //'<span class="shop_power_delect">删除</span>'+
                                '</p>'+
                                '<ul>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="Account" id="check1'+shopid+'"><label for="check1'+shopid+'"></label></p>'+
                                        '<span>买单收银</span>'+
                                        '<span style="color: red;">仅在app支持使用本功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="DoubleCalendar" id="check2'+shopid+'"><label for="check2'+shopid+'"></label></p>'+
                                        '<span>设置翻倍日及ktv/酒店夜场专场</span>'+
                                        '<span style="color: red;">暂时仅在app支持使用本功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="OrderManager" id="check3'+shopid+'"><label for="check3'+shopid+'"></label></p>'+
                                        '<span>订单管理</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="CommentManager" id="check9'+shopid+'"><label for="check9'+shopid+'"></label></p>'+
                                        '<span>评价管理</span>'+
                                        '<span style="color: red;">暂时仅在app支持使用本功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="CollectMoney" id="check4'+shopid+'"><label for="check4'+shopid+'"></label></p>'+
                                        '<span>财务结款</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="DoubleCalendar" value="" checked onclick="return false" id="check5'+shopid+'"><label for="check5'+shopid+'"></label></p>'+
                                        '<span>查看翻倍日</span>'+
                                        '<span style="color: red;">暂时仅在app支持使用本功能,所有子账号均有此功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="" value="" checked onclick="return false" id="check6'+shopid+'"><label for="check6'+shopid+'"></label></p>'+
                                        '<span>地推管理</span>'+
                                        '<span style="color: red;">所有子账号均有此功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="" value="" checked onclick="return false" id="check7'+shopid+'"><label for="check7'+shopid+'"></label></p>'+
                                        '<span>专属二维码</span>'+
                                        '<span style="color: red;">所有子账号均有此功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="" value="Admin" onclick="return false" id="check8'+shopid+'"><label for="check8'+shopid+'"></label></p>'+
                                        '<span>授权管理</span>'+
                                        '<span style="color: red;">仅提供给管理员使用</span>'+
                                    '</li>'+
                                '</ul>'+
                                '</div>');
                    $('.power').append(shop_power);
                }else{
                    for (var i = 0; i < $(".shop_power").length; i++) {
                        if($(".shop_power").eq(i).attr('shopid') == shopid)
                            $(".shop_power").eq(i).remove();
                    };
                }
            }
        })
        //选择权限
        function choose_power_way(){
            var shoose_check = $(".every_shop input[type='checkbox']:checked").length;
            $('.power').empty();
            if($('#power_way').val() == '0'){
                $('.power').append(ul);
            }else{
                for (var i = 0; i < shoose_check; i++) {
                    var shopname = $(".every_shop input[type='checkbox']:checked").eq(i).parent().siblings('.shopname').html();
                    var shopid = $(".every_shop input[type='checkbox']:checked").eq(i).val();
                    var shop_power = $('<div class="shop_power" shopid="'+shopid+'">'+
                                '<p class="shop_power_title">'+
                                    '<span class="shop_power_name">'+shopname+'</span>'+
                                    //'<span class="shop_power_delect">删除</span>'+
                                '</p>'+
                                '<ul>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="Account" id="check1'+shopid+'"><label for="check1'+shopid+'"></label></p>'+
                                        '<span>买单收银</span>'+
                                        '<span style="color: red;">仅在app支持使用本功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="DoubleCalendar" id="check2'+shopid+'"><label for="check2'+shopid+'"></label></p>'+
                                        '<span>设置翻倍日及ktv/酒店夜场专场</span>'+
                                        '<span style="color: red;">暂时仅在app支持使用本功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="OrderManager" id="check3'+shopid+'"><label for="check3'+shopid+'"></label></p>'+
                                        '<span>订单管理</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="CommentManager" id="check9'+shopid+'"><label for="check9'+shopid+'"></label></p>'+
                                        '<span>评价管理</span>'+
                                        '<span style="color: red;">暂时仅在app支持使用本功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="shopcheck"><input type="checkbox" name="" value="CollectMoney" id="check4'+shopid+'"><label for="check4'+shopid+'"></label></p>'+
                                        '<span>财务结款</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="DoubleCalendar" value="" checked onclick="return false" id="check5'+shopid+'"><label for="check5'+shopid+'"></label></p>'+
                                        '<span>查看翻倍日</span>'+
                                        '<span style="color: red;">暂时仅在app支持使用本功能,所有子账号均有此功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="" value="" checked onclick="return false" id="check6'+shopid+'"><label for="check6'+shopid+'"></label></p>'+
                                        '<span>地推管理</span>'+
                                        '<span style="color: red;">所有子账号均有此功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="" value="" checked onclick="return false" id="check7'+shopid+'"><label for="check7'+shopid+'"></label></p>'+
                                        '<span>专属二维码</span>'+
                                        '<span style="color: red;">所有子账号均有此功能</span>'+
                                    '</li>'+
                                    '<li>'+
                                        '<p class="nochoose"><input type="checkbox" name="" value="Admin" onclick="return false" id="check8'+shopid+'"><label for="check8'+shopid+'"></label></p>'+
                                        '<span>授权管理</span>'+
                                        '<span style="color: red;">仅提供给管理员使用</span>'+
                                    '</li>'+
                                '</ul>'+
                                '</div>');
                    $('.power').append(shop_power);
                };
            }
        }
        //验证码验证
        var countdown = 60;
        var get_code_timer=1;
        $('.get_yzm').click(function(){
            var account_mobile = $("input[name='account_mobile']").val();
            if(account_mobile == '' || account_mobile.length != 11) {
                alert('请输入正确的手机号码');return;
            }
            //发送短信验证码
            if(get_code_timer == 1){
                 $.ajax({
                     url: '/shop/admin/account/add/code/get',
                     type: 'get',
                     data: {'mobile':account_mobile},
                     dataType:'json',
                     success:function(data){
                         if(data.status == 'success') {
                             var timer = setInterval(function(){
                                 if(countdown == 0){
                                     $(".get_yzm").val("重新获取验证码");
                                     get_code_timer=1;
                                     countdown = 60;
                                     clearInterval(timer)
                                 }else{
                                     countdown--;
                                     $(".get_yzm").val(countdown+'秒');
                                     get_code_timer=0;
                                 }
                             },1000)
                         } else {
                            $(".prompt").show();
                            $(".promit_mark").show();
                            $(".prompt .prompt_content").html(data.message);return;
                         }
                     }
                 })
            }
        })
         $(".prompt .sure").click(function(){
            $(".prompt").hide();
            $(".promit_mark").hide();
         })
         $(".prompt .title img").click(function(){
            $(".prompt").hide();
            $(".promit_mark").hide();
         })
        $("input[name='sure']").click(function(){
            var shoose_check = $(".every_shop input[type='checkbox']:checked").length;
            var account_name = $("input[name='account_name']").val();
            var account_mobile = $("input[name='account_mobile']").val();
            var code = $("input[name='code']").val();
            if(account_name == ''){
                alert("请填写子账号姓名");return false;
            }else if(account_mobile == ''){
                alert("请填写子账号手机号");return false;
            }else if(code == 0){
                alert("请获取手机验证码");return false;
            }else if(shoose_check == 0){
                alert("请选择子账号门店");return false;
            }else{
                if($('#power_way').val() == '0'){
                    //在不同的门店下权限相同
                    var auth = '{';
                    var shopid=[];
                    for (var i = 0; i < $(".every_shop input[type='checkbox']").length; i++) {
                        if($(".every_shop input[type='checkbox']").eq(i).is(":checked") == true){
                            shopid.push($(".every_shop input[type='checkbox']").eq(i).val());
                        }
                    };
                    //拼接成{"666":["Account","DoubleCalendar","OrderManager","CollectMoney"], "616":["Account","DoubleCalendar","OrderManager","CollectMoney"]}
                    for (var i = 0; i < shopid.length; i++) {
                        auth+= '"' + shopid[i] + '":[';
                        //var authbak = auth;
                        var li_length = $('.power').children('ul').children('li').length;
                        for (var j = 0; j < li_length; j++) {
                            if($('.power').children('ul').children('li').eq(j).children().children("input[type='checkbox']").is(":checked") == true){
                                var power = $('.power').children('ul').children('li').eq(j).children().children("input[type='checkbox']").val();
                                if(power == ''){
                                    continue;
                                }else{
                                    auth+='"'+power+'",'
                                }
                            }else{
                                continue;
                            }
                        };
                        var lastchart = auth.substring(auth.length,auth.length-1);
                        if(lastchart == ',') {
                            auth=auth.substring(0,auth.length-1);
                        }
                        //if(auth != authbak){
                            //auth=auth.substring(0,auth.length-2);
                        //};
                        auth+='],';
                    };
                    if(auth != '{'){
                        auth=auth.substring(0,auth.length-1);
                    };
                    auth+='}';
                }else{//在不同门店的权限独立配置
                    var auth = '{'
                    for (var i = 0; i < $('.shop_power').length; i++) {
                        var shopid = $('.shop_power').eq(i).attr('shopid');
                        auth+='"'+shopid+'":[';
                        var authbak = auth;
                        var li_length = $('.shop_power').eq(i).children('ul').children('li').length;
                        for (var j = 0; j < li_length; j++) {
                            if($('.shop_power').eq(i).children('ul').children('li').eq(j).children().children("input[type='checkbox']").is(":checked") == true){
                                var power = $('.shop_power').eq(i).children('ul').children('li').eq(j).children().children("input[type='checkbox']").val();
                                if(power == ''){
                                    continue;
                                }else{
                                    auth+='"'+power+'",'
                                }
                            }else{
                                continue;
                            }
                        };

                        var lastchart = auth.substring(auth.length,auth.length-1);
                        if(lastchart == ',') {
                            //最后一个字符是不是逗号，是逗号就去逗号
                            auth=auth.substring(0,auth.length-1);
                        }
                        //if(auth != authbak){
                        //    auth=auth.substring(0,auth.length-2);
                        //};
                        auth+='],';
                    };

                    if(auth != '{'){
                        auth=auth.substring(0,auth.length-1);
                    };
                    auth+='}';
                }
                //console.log(auth)
            }
            //console.log(account_name);
            //console.log(account_mobile)
            $.ajax({
                url: '/shop/admin/account/add/submit',
                type: 'post',
                data: {
                    'mobile':account_mobile,
                    'name' : account_name,
                    'code' : code,
                    'auth' : auth
                },
                dataType:'json',
                success:function(data){
                    if(data.status == 'success') {
                        alert(data.message);
                        window.location.href="/shop/admin/list"
                    } else {
                        alert(data.message);
                        return;
                    }
                }
            })
        })
    </script>
</body>
</html>